<template>
    <div id="customer">
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="3" :md="2" :lg="2" style="margin: 0 0 0 2%">
                <el-input placeholder="客户代号" v-model="CustomerCode"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-input placeholder="客户名称" v-model="CustomerName"></el-input>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增客户</el-button>
            </el-col>
        </div>
        <el-table  max-height="600" class="table_customer" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="CustomerCode" sortable label="客户代号" ></el-table-column>
            <el-table-column prop="CustomerName" label="客户名称"></el-table-column>
            <el-table-column prop="Telephone" sortable label="手机号码" ></el-table-column>
            <el-table-column prop="CloseAccountsWay" sortable label="结款方式"></el-table-column>
            <el-table-column prop="MonthlyKnotDays" sortable label="月结天数"></el-table-column>
            <el-table-column prop="ReconciliationDate" sortable label="对账日期"></el-table-column>
            <el-table-column prop="PackAsk" sortable label="包装要求"></el-table-column>
            <el-table-column prop="SendGoodsWay" sortable label="发货方式"></el-table-column>
            <el-table-column prop="InvoiceAddress" sortable label="发票地址" width="180"></el-table-column>
            <el-table-column  label="联系人">
                <template scope="scope">
                    <el-button size="small" type="warning" @click="Customer(scope.$index, scope.row)">联系人</el-button>
                </template>
            </el-table-column>
            <el-table-column  label="联系地址">
                <template scope="scope">
                    <el-button size="small" type="primary" @click="Address(scope.$index, scope.row)">联系地址</el-button>
                </template>
            </el-table-column>
            <el-table-column  label="送货地址">
                <template scope="scope">
                    <el-button size="small" type="success" @click="SendAddress(scope.$index, scope.row)">送货地址</el-button>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column prop="ModifyDate" sortable label="时间"  width="100"></el-table-column>
            <el-table-column prop="OperationUser" sortable label="操作人员ID" v-if="false"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作人员"  width="120"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作" fixed="right" width="180">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增客户 -->
        <el-dialog title="新增客户" :visible.sync="dialogFormVisible" >
            <el-form :model="form" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="客户代号" :label-width="formLabelWidth">
                    <el-input v-model="form.CustomerCode" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.CustomerName" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input v-model="form.Telephone" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" :label-width="formLabelWidth">
                    <div style="display: flex;">
                        <div style="flex: 2;">
                            <el-select v-model="form.CloseAccountsWay" placeholder="请选择">
                                <el-option label="款到发货" value="1"></el-option>
                                <el-option label="货到付款" value="2"></el-option>
                                <el-option label="见票付款" value="3"></el-option>
                                <el-option label="月结" value="4"></el-option>
                            </el-select>
                        </div>
                        <div style="flex: 1;">
                            <el-input v-model="form.MonthlyKnotDays" placeholder="月结天数"></el-input>
                        </div>
                        <div style="flex: 3;"></div>
                    </div>
                </el-form-item>
                <el-form-item label="发货方式" :label-width="formLabelWidth">
                    <el-select v-model="form.SendGoodsWay" placeholder="请选择">
                        <el-option label="上门取货" value="1"></el-option>
                        <el-option label="送货上门" value="2"></el-option>
                        <el-option label="快递" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="包装要求" :label-width="formLabelWidth">
                    <el-input v-model="form.PackAsk" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="对账日期" :label-width="formLabelWidth">
                    <el-input v-model="form.ReconciliationDate" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="发票地址" :label-width="formLabelWidth">
                    <el-input v-model="form.InvoiceAddress" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改客户 -->
        <el-dialog title="修改客户" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="客户代号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.CustomerCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.CustomerName" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.Telephone" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" :label-width="formLabelWidth">
                    <div style="display: flex;">
                        <div style="flex: 2;">
                            <el-select v-model="formEdit.CloseAccountsWay" placeholder="请选择">
                                <el-option label="款到发货" value="款到发货"></el-option>
                                <el-option label="货到付款" value="货到付款"></el-option>
                                <el-option label="见票付款" value="见票付款"></el-option>
                                <el-option label="月结" value="月结"></el-option>
                            </el-select>
                        </div>
                        <div style="flex: 0.2;"></div>
                        <div style="flex: 1;">
                            <el-input v-model="formEdit.MonthlyKnotDays" placeholder="月结天数"></el-input>
                        </div>
                        <div style="flex: 3;"></div>
                    </div>
                </el-form-item>
                <el-form-item label="发货方式" :label-width="formLabelWidth">
                    <el-select v-model="formEdit.SendGoodsWay" placeholder="请选择">
                        <el-option label="上门取货" value="上门取货"></el-option>
                        <el-option label="送货上门" value="送货上门"></el-option>
                        <el-option label="快递" value="快递"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="包装要求" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.PackAsk" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="对账日期" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.ReconciliationDate" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="发票地址" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.InvoiceAddress" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除客户 -->
        <el-dialog title="删除用户" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此客户吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 联系人 表格  1111111111 -->
        <el-dialog title="联系人" :visible.sync="CustomerFormVisible" >
            <el-form :model="formCustomer" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <div style="width: 100%;height: 65px;display: flex;">
                    <div style="flex: 1;text-align: left">
                        <!--客户代号：<div v-model="_CustomerCode"></div>-->
                    </div>
                    <div style="flex: 1;text-align: right">
                        <el-button type="success" @click="addCustomer">新增联系人</el-button>
                    </div>
                </div>
                <!-- 联系人表格 -->
                <el-table  max-height="600" class="table_customer" stripe border ref="CustomerTable" :data="tableCustomer" tooltip-effect="dark"
                           style="width: 100%;text-align: center !important;margin: auto">
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="ContactPeople" label="联系人"></el-table-column>
                    <el-table-column prop="MobilePhone" sortable label="手机号码"></el-table-column>
                    <el-table-column prop="Duty" sortable label="职务"></el-table-column>
                    <!--<el-table-column prop="Remark" sortable label="职级"></el-table-column>-->
                    <!-- 修改和删除 -->
                    <el-table-column prop="edit" label="操作">
                        <template scope="scope">
                            <el-button size="small" @click="CustomerEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="CustomerDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="CustomerFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="CustomerForm">确 定</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 新增 联系人 -->
        <el-dialog title="新增联系人" :visible.sync="dialogCustomerVisible" >
            <el-form :model="formCustomeAdd" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="联系人员" :label-width="formLabelWidthCusAdd">
                    <el-input v-model="formCustomeAdd.ContactPeople" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidthCusAdd">
                    <el-input v-model="formCustomeAdd.MobilePhone" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item label="职务" :label-width="formLabelWidthCusAdd">
                    <el-input v-model="formCustomeAdd.Duty" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidthCusAdd">
                    <el-input v-model="formCustomeAdd.Remark"  type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCustomerVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCustomerForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 联系人 -->
        <el-dialog title="修改联系人" :visible.sync="EditCustomerVisible">
            <el-form :model="formCustomerEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="客户代号" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formCustomerEdit.CustomerCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formCustomerEdit.CustomerName" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人员" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formCustomerEdit.ContactPeople" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formCustomerEdit.MobilePhone" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="职务" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formCustomerEdit.Duty" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formCustomerEdit.Remark" type="textarea" :autosize="{ minRows: 0, maxRows: 8}" style="width: 85%" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditCustomerVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditCustomerForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除 联系人 -->
        <el-dialog title="删除联系人" :visible.sync="DeleteCustomerVisible">
            <el-form :model="formCustomerDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此联系人吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteCustomerVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteCustomerForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 客户联系地址  2222222222 -->
        <!-- 客户地址 表格 》》》》》》》》》》》》》》》》》》》》》》》》 -->
        <el-dialog title="联系地址" :visible.sync="AddressFormVisible" >
            <el-form :model="formAddress" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <div style="width: 100%;height: 65px;display: flex;">
                    <div style="flex: 1;text-align: left">
                        客户代号：<span>{{_CustomerCode}}</span>
                    </div>
                    <div style="flex: 1;text-align: right">
                        <el-button type="success" @click="addAddress">新增联系地址</el-button>
                    </div>
                </div>
                <!-- 客户地址表格 -->
                <el-table  max-height="600" class="table_customer" stripe border ref="CustomerTable" :data="tableAddress" tooltip-effect="dark"
                           style="width: 100%;text-align: center !important;margin: auto">
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="CustomerAddress" label="联系地址"></el-table-column>
                    <!-- 修改和删除 -->
                    <el-table-column prop="edit" label="操作">
                        <template scope="scope">
                            <el-button size="small" @click="AddressEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="AddressDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="AddressFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddressForm">确 定</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 新增 客户地址  -->
        <el-dialog title="新增地址" :visible.sync="dialogAddressVisible" >
            <el-form :model="formAddressAdd" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="地址" :label-width="formLabelWidthCusAdd">
                    <el-input v-model="formAddressAdd.CustomerAddress" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddressVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAddressForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 客户地址  -->
        <el-dialog title="修改地址" :visible.sync="EditAddressVisible">
            <el-form :model="formAddressEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="客户代号" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formAddressEdit.CustomerCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formAddressEdit.CustomerName" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formAddressEdit.CustomerAddress" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditAddressVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditAddressForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除 客户地址  -->
        <el-dialog title="删除地址" :visible.sync="DeleteAddressVisible">
            <el-form :model="formAddressDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此地址吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteAddressVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteAddressForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 送货地址 表格 -->
        <el-dialog title="送货地址" :visible.sync="SendAddressFormVisible" >
            <el-form :model="formSendAddress" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <div style="width: 100%;height: 65px;display: flex;">
                    <div style="flex: 1;text-align: left">
                        <!--客户代号：<div v-model="_CustomerCode"></div>-->
                    </div>
                    <div style="flex: 1;text-align: right">
                        <el-button type="success" @click="addSendAddress">新增送货地址</el-button>
                    </div>
                </div>
                <!-- 送货地址表格 -->
                <el-table  max-height="600" class="table_customer" stripe border ref="CustomerTable" :data="tableSendAddress" tooltip-effect="dark"
                           style="width: 100%;text-align: center !important;margin: auto">
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <el-table-column prop="ID" sortable label="序号ID" v-if="false"></el-table-column>
                    <el-table-column prop="CustomerCode" sortable label="客户代号"></el-table-column>
                    <el-table-column prop="CustomerName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="SendGoodsAddress" label="送货地址"></el-table-column>

                    <!-- 修改和删除 -->
                    <el-table-column prop="edit" label="操作">
                        <template scope="scope">
                            <el-button size="small" @click="SendAddressEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="SendAddressDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="SendAddressFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="SendAddressForm">确 定</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 新增 送货地址 -->
        <el-dialog title="新增送货地址" :visible.sync="dialogSendAddressVisible" >
            <el-form :model="formSendAddressAdd" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="送货地址" :label-width="formLabelWidthCusAdd">
                    <el-input v-model="formSendAddressAdd.SendGoodsAddress" auto-complete="off" style="width: 85%"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSendAddressVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSendAddressForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 送货地址 -->
        <el-dialog title="修改送货地址" :visible.sync="EditSendAddressVisible">
            <el-form :model="formSendAddressEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item label="客户代号" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formSendAddressEdit.CustomerCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formSendAddressEdit.CustomerName" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="送货地址" :label-width="formCustomerWidthEdit">
                    <el-input v-model="formSendAddressEdit.SendGoodsAddress" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditSendAddressVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditSendAddressForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除 送货地址 -->
        <el-dialog title="删除送货地址" :visible.sync="DeleteSendAddressVisible">
            <el-form :model="formSendAddressDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此送货地址吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteSendAddressVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteSendAddressForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                //    表格
                tableData:[],
                //   按条件 查询
                CustomerCode: '',
                CustomerName:'',
                //     分页
                PageCount:10 ,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                //    新增 客户
                dialogFormVisible: false,
                form: {
                    CustomerCode: '',
                    CustomerName:'',
                    Telephone: '',
                    CloseAccountsWay: '',    //  付款方式
                    SendGoodsWay: '',      //  送货方式
                    PackAsk: '',           //  包装要求
                    ReconciliationDate: '',   //  对账周期
                    InvoiceAddress: '',     //  发票地址
                    MonthlyKnotDays: '',    //  月结数字
                },
                formLabelWidth: '120',
                //  修改客户
                EditFormVisible: false,
                formEdit:{},
                formLabelWidthEdit:'120',
                //  删除客户
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'120',
                //   联系人
                tableCustomer:[],    //  联系人表格
                CustomerFormVisible: false,
                formCustomer:{},
                _CustomerCode:'',     //   不显示
                //  新增联系人
                dialogCustomerVisible: false,
                formCustomeAdd:{
                    CustomerCode:'',
                    ContactPeople:'',
                    MobilePhone:'',
                    Duty:'',
                    Remark:'',
                    OperationUser:'',
                },
                formLabelWidthCusAdd:'120',
                //  修改 联系人
                EditCustomerVisible: false,
                formCustomerEdit:{},
                formCustomerWidthEdit:'120',
                //  删除 联系人
                DeleteCustomerVisible: false,
                formCustomerDelete:{},
                //   客户地址   》》》》》》》》》》》》》》》》》》》》》》》》》
                tableAddress:[],    //  地址表格
                AddressFormVisible: false,
                formAddress:{},
//                _CustomerCode:'a',     //   不显示
                //  新增客户地址
                dialogAddressVisible: false,
                formAddressAdd:{
                    CustomerCode:'',
                    CustomerAddress:'',
                    OperationUser:'',
                },
//                formLabelWidthCusAdd:'120',
                //  修改 客户地址
                EditAddressVisible: false,
                formAddressEdit:{},
                formAddressWidthEdit:'120',
                //  删除 客户地址
                DeleteAddressVisible: false,
                formAddressDelete:{},

                //   送货地址
                tableSendAddress:[],    //  送货地址表格
                SendAddressFormVisible: false,
                formSendAddress:{},
//                _CustomerCode:'a',     //   不显示
                //  新增送货地址
                dialogSendAddressVisible: false,
                formSendAddressAdd:{
                    CustomerCode:'',
                    SendGoodsAddress:'',
                    OperationUser:'',
                },
//                formLabelWidthCusAdd:'120',
                //  修改 送货地址
                EditSendAddressVisible: false,
                formSendAddressEdit:{},
                formSendAddressWidthEdit:'120',
                //  删除 送货地址
                DeleteSendAddressVisible: false,
                formSendAddressDelete:{},
            }
        },
        methods: {
            //    分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   客户  表格
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
//                this.CustomerCode = this.CustomerCode.trim();  // 1、 去空格判断
//                this.CustomerName = this.CustomerName.trim();
                    url = "http://192.168.3.238:8088/CustomerManager/GetCustomerPage?CustomerCode=" + this.CustomerCode + "&CustomerName=" +
                        this.CustomerName + "&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableData=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableData.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("客户表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  新增客户
            add() {
                console.log("点击新增按钮 ")
                this.dialogFormVisible = true;
            },
            addForm(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/AddCustomer";
                let addForm = {
                    "CustomerCode":this.form.CustomerCode,
                    "CustomerName":this.form.CustomerName,     //
                    "Telephone":this.form.Telephone,
                    "CloseAccountsWay":this.form.CloseAccountsWay,  //  付款方式
                    "SendGoodsWay":this.form.SendGoodsWay,   //送货方式
                    "PackAsk":this.form.PackAsk,      //  包装要求
                    "ReconciliationDate":this.form.ReconciliationDate,  //  对账周期
                    "InvoiceAddress":this.form.InvoiceAddress,   //  发票地址
                    "MonthlyKnotDays":this.form.MonthlyKnotDays,   //  月结数字
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.form.CustomerCode.length === 0){
                    alert("请输入客户代号");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogFormVisible = false ;
                            that.selectTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //  修改客户
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
                console.log("点击编辑按钮")
                console.log(this.formEdit)
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/CustomerManager/UpdateCustomer";
                let EditForm = {
                    "CustomerCode":this.formEdit.CustomerCode,
                    "CustomerName":this.formEdit.CustomerName,     //  科室代号
                    "Telephone":this.formEdit.Telephone,
                    "CloseAccountsWay":this.formEdit.CloseAccountsWay,  //  付款方式
                    "SendGoodsWay":this.formEdit.SendGoodsWay,   //送货方式
                    "PackAsk":this.formEdit.PackAsk,      //  包装要求
                    "ReconciliationDate":this.formEdit.ReconciliationDate,  //  对账周期
                    "InvoiceAddress":this.formEdit.InvoiceAddress,   //  发票地址
                    "MonthlyKnotDays":this.formEdit.MonthlyKnotDays,   //  月结数字
                    "OperationUser":1
                };
                console.log("修改客户");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  删除客户
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/CustomerManager/DeleteCustomer";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "CustomerCode":this.formDelete.CustomerCode,
                    "OperationUser":1
                };
                console.log("url")
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },
            //  联系人 按钮
            Customer(index, row){
                this.formCustomer = row;
                this._CustomerCode = row.CustomerCode;
                this.selectCustomerTable();
                this.CustomerFormVisible = true ;
                console.log("联系人")
                console.log(this.formCustomer)
                console.log(this._CustomerCode)
            },
            //   联系人表格
            selectCustomerTable(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/CustomerManager/GetCustomerContactPeople?CustomerCode=" + this._CustomerCode
                console.log("联系人表格");
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableCustomer=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableCustomer.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("联系人表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  联系人弹框  确定按钮
            CustomerForm(){
                this.CustomerFormVisible = false ;
            },
            //  新增联系人
            addCustomer(){
                console.log("点击新增联系人呢按钮 ")
                this.dialogCustomerVisible = true;
            },
            addCustomerForm(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/AddCustomerContactPeople";
                let addForm = {
                    "CustomerCode":this._CustomerCode,
                    "ContactPeople":this.formCustomeAdd.ContactPeople,     //  姓名
                    "MobilePhone":this.formCustomeAdd.MobilePhone,   //  手机
                    "Duty":this.formCustomeAdd.Duty,  //  职务
                    "Remark":this.formCustomeAdd.Remark,   // 备注
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.formCustomeAdd.ContactPeople.length === 0){
                    alert("请输入联系人员");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogCustomerVisible = false ;
                            that.selectCustomerTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //   修改联系人
            CustomerEdit(index, row) {
                this.EditCustomerVisible = true;
                this.formCustomerEdit = row ;
                console.log("点击编辑联系人按钮");
                console.log(this.formCustomerEdit)
            },
            //  修改联系人  按钮
            EditCustomerForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/CustomerManager/UpdateCustomerContactPeople";
                let EditForm = {
                    "ID":this.formCustomerEdit.ID,
                    "CustomerCode":this._CustomerCode,
                    "ContactPeople":this.formCustomerEdit.ContactPeople,
                    "MobilePhone":this.formCustomerEdit.MobilePhone,
                    "Duty":this.formCustomerEdit.Duty,  //
                    "Remark":this.formCustomerEdit.Remark,   //
                    "OperationUser":1
                };
                console.log("修改联系人 >>>>》》》》》》》》》");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditCustomerVisible = false;
                        that.selectCustomerTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  删除 联系人
            CustomerDelete(index, row){
                this.DeleteCustomerVisible = true ;
                this.formCustomerDelete = row ;
            },
            DeleteCustomerForm(){
                let DeleteUrl = "http://192.168.3.238:8088/CustomerManager/DeleteContactPeople";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "CustomerCode":this.formCustomerDelete.CustomerCode,
                    "ID":this.formCustomerDelete.ID ,
                    "OperationUser":1
                };
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)

                        that.DeleteCustomerVisible = false;     //  关闭窗口
                        that.selectCustomerTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },
            //   客户联系地址 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
            Address(index, row){
                this.formAddress = row;
                this._CustomerCode = row.CustomerCode;
                this.selectAddressTable();
                this.AddressFormVisible = true ;
                console.log("地址")
            },
            //地址表格
            selectAddressTable(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/CustomerManager/GetCustomerAddress?CustomerCode=" + this._CustomerCode
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableAddress=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableAddress.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("联系人表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  地址弹框  确定按钮
            AddressForm(){
                this.AddressFormVisible = false ;
            },
            //  新增地址 》》》》》》》》》》》》》》》》》》》》》》》》》》》》
            addAddress(){
                console.log("点击新增地址按钮 ")
                this.dialogAddressVisible = true;
            },
            addAddressForm(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/AddCustomerAddress";
                let addForm = {
                    "CustomerCode":this._CustomerCode,
                    "CustomerAddress":this.formAddressAdd.CustomerAddress,
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.formAddressAdd.CustomerAddress.length === 0){
                    alert("请输入联系人员");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogAddressVisible = false ;
                            that.selectAddressTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //   修改地址
            AddressEdit(index, row) {
                this.EditAddressVisible = true;
                this.formAddressEdit = row ;
                console.log("点击编辑联系人按钮");
                console.log(this.formAddressEdit)
            },
            //  修改地址  按钮
            EditAddressForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/CustomerManager/UpdateCustomerAddress";
                let EditForm = {
                    "ID":this.formAddressEdit.ID,
                    "CustomerAddress":this.formAddressEdit.CustomerAddress,
                    "OperationUser":1
                };
                console.log("修改地址 >>>>》》》》》》》》》");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditAddressVisible = false;
                        that.selectAddressTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  删除 地址
            AddressDelete(index, row){
                this.DeleteAddressVisible = true ;
                this.formAddressDelete = row ;
            },
            DeleteAddressForm(){
                let DeleteUrl = "http://192.168.3.238:8088/CustomerManager/DeleteCustomerAddress";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ID":this.formAddressDelete.ID,
                    "OperationUser":1,
                };
                console.log("删除 》》》》》》》》》》》")
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)
                        that.DeleteAddressVisible = false;     //  关闭窗口
                        that.selectAddressTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },


            SendAddress(index, row){
                this.formSendAddress = row;
                this._CustomerCode = row.CustomerCode;
                this.selectSendCustomerTable();
                this.SendAddressFormVisible = true ;
                console.log("送货地址")
                console.log(this.formCustomer)
                console.log(this._CustomerCode)
            },
            //送货表格
            selectSendCustomerTable(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/CustomerManager/GetCustomerSendAddress?CustomerCode=" + this._CustomerCode
                console.log(url);
                this.$http.get(url,).then(res=>{
                    this.tableSendAddress=[];
                    let Code = res.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = res.data.Total;
                        for(let i=0;i<res.data.ObjList.length;i++){
                            this.tableSendAddress.push(res.data.ObjList[i]);
                            res.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("送货地址表格")
                    console.log(res)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  送货地址弹框  确定按钮
            SendAddressForm(){
                this.SendAddressFormVisible = false ;
            },
            //  新增送货地址 》》》》》》》》》》》》》》》》》》》》》》》》》
            addSendAddress(){
                console.log("点击新增送货地址按钮 ")
                this.dialogSendAddressVisible = true;
            },
            addSendAddressForm(){
                //   post
                let addUrl = "http://192.168.3.238:8088/CustomerManager/AddCustomerSendAddress";
                let addForm = {
                    "CustomerCode":this._CustomerCode,
                    "SendGoodsAddress":this.formSendAddressAdd.SendGoodsAddress,
                    "OperationUser":1
                };
                console.log("addForm是什么");
                console.log(addForm);
                let that = this ;
                if(this.formSendAddressAdd.SendGoodsAddress.length === 0){
                    alert("请输入送货地址");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
                            console.log(response);
                            that.dialogSendAddressVisible = false ;
                            that.selectSendCustomerTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //   修改送货地址
            SendAddressEdit(index, row) {
                this.EditSendAddressVisible = true;
                this.formSendAddressEdit = row ;
                console.log("点击编辑联系人按钮");
                console.log(this.formSendAddressEdit)
            },
            //  修改地址  按钮
            EditSendAddressForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/CustomerManager/UpdateCustomerSendAddress";
                let EditForm = {
                    "ID":this.formSendAddressEdit.ID,
                    "SendGoodsAddress":this.formSendAddressEdit.SendGoodsAddress,
                    "OperationUser":1
                };
                console.log("修改送货地址 >>>>》》》》》》》》》");
                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditSendAddressVisible = false;
                        that.selectSendCustomerTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  删除 送货 地址
            SendAddressDelete(index, row){
                this.DeleteSendAddressVisible = true ;
                this.formSendAddressDelete = row ;
            },
            DeleteSendAddressForm(){
                let DeleteUrl = "http://192.168.3.238:8088/CustomerManager/DeleteCustomerSendAddress";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ID":this.formSendAddressDelete.ID,
                    "OperationUser":1
                };
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (res) {
                        console.log("删除成功")
                        console.log(res)

                        that.DeleteSendAddressVisible = false;     //  关闭窗口
                        that.selectSendCustomerTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },


            //  月结天数
//            days(){
//                if(this.form.CloseAccountsWay=4){
//                    alert('月结')
//                }
//            }
        },
        mounted: function () {   //  onload
            this.selectTable();
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #customer {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_customer thead tr th {
        text-align: center;
    }
</style>